<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>老虎机</title>
<style type="text/css">
.lottery_area{
	width:800px;
	height:400px;
	margin:50px auto;
	background:#E0E0E0;
	position:relative;
}
ul,li{
	margin:0px;
	padding:0px;
	list-style:none;
}
ul.slot_machine{
	width:800px;
	height:400px;
	overflow:hidden;
}
ul.slot_machine li{
	width:200px;
	height:100px;
	background-position:0px -100px;
	position:absolute;
}
ul.slot_machine li.highlight{
	background-position:0 0;
}
ul.slot_machine li.item_1{
	left:0px;
	top:0px;
}
ul.slot_machine li.item_2{
	left:0px;
	top:100px;
}
ul.slot_machine li.item_3{
	left:0px;
	top:200px;
}
ul.slot_machine li.item_4{
	left:0px;
	top:300px;
}
ul.slot_machine li.item_5{
	left:200px;
	top:300px;
}
ul.slot_machine li.item_6{
	left:400px;
	top:300px;
}
ul.slot_machine li.item_7{
	left:600px;
	top:300px;
}
ul.slot_machine li.item_8{
	left:600px;
	top:200px;
}
ul.slot_machine li.item_9{
	left:600px;
	top:100px;
}
ul.slot_machine li.item_10{
	left:600px;
	top:0px;
}

ul.slot_machine li.item_11{
	left:400px;
	top:0px;
}

ul.slot_machine li.item_12{
	left:200px;
	top:0px;
}

.lottery_zone{
	position:absolute;
	top:100px;
	left:200px;
	width:400px;
	height:200px;
	background:#FFF;	
}
.lottery_box{height:120px; width:200px;overflow:hidden; border:1px solid #F00; padding:0px 20px;}
.lottery_box ul li{line-height:30px;height:30px; overflow:hidden;}
.lottery_box ul li.active{background:#CCC;}

</style>
</head>

<body>
<div class="lottery_area">
	<ul id="slot_machine" class="slot_machine">
    	<li class="lottery_item highlight item_1" style="background-image:url(images/01.png)"></li>
        <li class="lottery_item highlight item_2" style="background-image:url(images/02.png);"></li>
        <li class="lottery_item highlight item_3" style="background-image:url(images/03.png);"></li>
        <li class="lottery_item highlight item_4" style="background-image:url(images/04.png);"></li>
        <li class="lottery_item highlight item_5" style="background-image:url(images/01.png);"></li>
        <li class="lottery_item highlight item_6" style="background-image:url(images/02.png);"></li>
        <li class="lottery_item highlight item_7" style="background-image:url(images/03.png);"></li>
        <li class="lottery_item highlight item_8" style="background-image:url(images/04.png);"></li>
        <li class="lottery_item highlight item_9" style="background-image:url(images/01.png);"></li>
        <li class="lottery_item highlight item_10" style="background-image:url(images/02.png);"></li>
        <li class="lottery_item highlight item_11" style="background-image:url(images/03.png);"></li>
        <li class="lottery_item highlight item_12" style="background-image:url(images/04.png);"></li>
    </ul>
    <div class="lottery_zone">
        <div id="lottery_box" class="lottery_box">
            <ul id="lottery_box_list">
                <li></li>
            </ul>
        </div>
        <a href="javascript:;" id="btn_start">开始</a>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/slot_machine.js"></script>
<script type="text/javascript" src="js/lottery_box.js"></script>
<script type="text/javascript">
$(function(){
	var lotteryBoxList = $("#lottery_box_list");
	var html = [];
	for(var i=0; i< 1000; i++){
		html.push('<li>'+ i + '</li>');
	}
	lotteryBoxList.html(html.join(''));
	
	var lotteryBox = new LotteryBox({
		container:lotteryBoxList
	});
	
	var slotMachine = new SlotMachine({
		list:$("#slot_machine li"),
		afterLottery:function(){
			lotteryBox.lottery(100);
		},
		afterMaxSpeed:function(){
			setTimeout(function(){
				slotMachine.lottery(7);
			}, 1000);
			
		}
	});
	
	
	
	$("#btn_start").bind("click", function(){
		slotMachine.start();
		lotteryBox.start();
	});

	
});
</script>
</body>
</html>
